import {
	Primary,
	Controls,
	Stories,
	Meta,
	ArgTypes,
} from '@storybook/addon-docs/blocks';

import * as ModalStories from './Modal.stories.js';

<Meta of={ModalStories} />

# Modal

**Deprecated** in favour of SideModal. Please migrate to use SideModal and `openSideModal` function from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable.

## Usage

This library uses the [vue-js-modal](https://github.com/euvl/vue-js-modal) component to control modals and dialogs. For a simple confirmation modal, see the [Dialog](#/mixins/dialog) component. For all other needs, use the `<Modal>` component by importing it and showing it like this.

```js
import Modal from '@/components/Modal/Modal.vue';

export default {
	components: {
		Modal,
	},
	methods: {
		openModal() {
			this.$modal.show('exampleModalName');
		},
	},
};
```

## Focus

When a modal is opened the focus will be moved into it. When it is closed the focus must be reset to the element it was on _before the modal was opened_.

Use a [$ref](https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements) to set focus back to the appropriate element.

```html
<PkpButton ref="button" @click="$modal.show('example')">Open Modal</PkpButton>
<Modal v-bind="MODAL_PROPS" name="example" @closed="setFocusToRef('button')">
	...
</Modal>
```

A dialog will reset the focus automatically.

<ArgTypes />
